<template>
	<view class="dropdown-container">
		<!-- Dropdown Header -->
		<view class="dropdown-selected" @click="toggleDropdown">
			<text>{{ selectedOption ? selectedOption.alliance_name : placeholder }}</text>
			<image class="dropdown-icon" :src="isOpen ? 'path/to/up-arrow.png' : 'path/to/down-arrow.png'" />
		</view>

		<!-- Dropdown List -->
		<view v-if="isOpen" class="dropdown-list">
			<!-- Scrollable list of options -->
			<scroll-view class="dropdown-scroll" scroll-y="true">
				<view v-for="(option, index) in options" :key="index" class="dropdown-item"
					@click="selectOption(option)">
					<text>{{ option.alliance_name }}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			options: {
				type: Array,
				required: true,
			},
			placeholder: {
				type: String,
				default: '请选择',
			},
		},
		data() {
			return {
				isOpen: false,
				selectedOption: null,
			};
		},
		methods: {
			toggleDropdown() {
				this.isOpen = !this.isOpen;
			},
			selectOption(option) {
				this.selectedOption = option;
				this.isOpen = false;
				this.$emit('update:modelValue', option.id);
			},
		},
	};
</script>

<style scoped>
	.dropdown-container {
		position: relative;
		width: 100%;
	}

	.dropdown-selected {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.dropdown-icon {
		width: 10px;
		height: 10px;
	}

	.dropdown-list {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		border: 1px solid #ccc;
		border-top: none;
		border-radius: 4px;
		background-color: #fff;
		z-index: 10;
		max-height: 200px;
		/* Limit the max height of the dropdown */
	}

	.dropdown-scroll {
		max-height: 200px;
		/* This ensures the scroll-view has a fixed height */
		overflow-y: auto;
		/* Enables vertical scrolling */
	}

	.dropdown-item {
		padding: 10px;
		border-bottom: 1px solid #ccc;
	}

	.dropdown-item:last-child {
		border-bottom: none;
	}
</style>